<template>
  <div class="login_bg">
    <div class="login_container">
      <div class="login_body">
        <div class="login-form">
          <div class="login-logo">
            <img class="logo" :alt="$CONFIG.APP_NAME" src="img/logo.png" />
            <h2>用户登录</h2>
          </div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" size="large">
            <el-form-item prop="user">
              <el-input v-model="ruleForm.user" prefix-icon="el-icon-user" clearable placeholder="用户名 / 手机 / 邮箱">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" clearable show-password
                placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 10px">
              <el-row>
                <el-col :span="12">
                  <el-checkbox label="记住我" v-model="ruleForm.autologin"></el-checkbox>
                </el-col>
                <el-col :span="12" style="text-align: right">
                  <el-button type="text">忘记密码？</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%" :loading="islogin" round @click="loginWork">登 录</el-button>
            </el-form-item>
          </el-form>

          <el-divider>其他登录方式</el-divider>

          <div class="login-oauth">
            <el-button size="small" type="primary" icon="el-icon-platform-eleme" circle></el-button>
            <el-button size="small" type="success" icon="el-icon-s-goods" circle></el-button>
            <el-button size="small" type="info" icon="el-icon-s-promotion" circle></el-button>
            <el-button size="small" type="warning" icon="el-icon-menu" circle></el-button>
          </div>
        </div>
        <div class="login-sidebox">
          <div class="login-sidebox__title">
            <h2>纽百特店管家</h2>
            <p>
              纽百特，致力于软件开发和数据技术，为客户创造价值，“承诺，专注，开放，共识，共赢”是我们核心价值观。纽百特，全球领先的软件服务商，为你，为我！
            </p>
          </div>
          <img src="img/loginbg.svg" />
        </div>
      </div>
      <div class="login-footer">
        © {{ $CONFIG.APP_NAME }} {{ $CONFIG.APP_VER }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userType: "admin",
        ruleForm: {
          user: "demo",
          password: "123456",
          autologin: false,
        },
        rules: {
          user: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }],
        },
        islogin: false,
      };
    },
    watch: {
      userType(val) {
        if (val == "admin") {
          this.ruleForm.user = "000410";
          this.ruleForm.password = "123456";
        } else if (val == "user") {
          this.ruleForm.user = "000410";
          this.ruleForm.password = "123456";
        }
      },
    },
    created: function () {
      this.$TOOL.data.remove("TOKEN");
      this.$TOOL.data.remove("USER_INFO");
      this.$TOOL.data.remove("MENU");
      this.$TOOL.data.remove("PERMISSIONS");
      this.$TOOL.data.remove("grid");
      //console.log('%c SCUI %c Gitee: https://gitee.com/lolicode/scui', 'background:#666;color:#fff;border-radius:3px;', '')
    },
    methods: {
      loginWork() {
        var self = this;
        this.$refs["ruleForm"].validate(function (valid) {
          if (valid) {
            self.login();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      async login() {
        this.islogin = true;
        // this.$TOOL.crypto.MD5(this.ruleForm.password),
        var data = {
          username: this.ruleForm.user,
          password: this.ruleForm.password,
          tenant: 11,
        };
        //获取token
        console.info(data);
        //获取token
        //http://127.0.0.1:8989/sydx-ybt/sys/login
        //https://cloud.newbyte.ltd/loginAjax.htm
        var user = await this.$HTTP.form("/rest/saas_user/loginSimple.htm", data);
        console.info(user);
        if (user.code == 0) {
          this.$TOOL.data.set("TOKEN", user.userToken);
          if (user.sessionToken) {
            this.$TOOL.data.set("sessionToken", user.sessionToken);
          }
          if (user.sessionId) {
            this.$TOOL.data.set("sessionId", user.sessionId);
          }
          //this.$TOOL.data.set("TOKEN", "i am login");
        } else {
          this.islogin = false;
          this.$message.warning(user.msg);
          return false;
        }
        //tenantRest/tenantuser/current.htm
        var url = this.$CONFIG.REMOTE_URL + "/tenantRest/tenantuser/current.htm";
        var curUser = await this.$HTTP.form(url, {});
        if (curUser.code == 0) {
          this.$TOOL.data.set("USER_INFO", curUser);
        }

        ///sydx-ybt/sys/permission/getUserPermissionByToken
        var menuUrl = this.$CONFIG.REMOTE_URL + "/tenantRest/tenantuser/menuByKey.htm";
        var menu = await this.$HTTP.form(menuUrl, {key:"platform"});
        console.info(menu);
        this.$TOOL.data.set("menu", menu.list)
        //获取菜单
        // var menu = null
        // if(this.ruleForm.user == 'admin'){
        // 	menu = await this.$API.system.menu.myMenus.get()
        // }else{
        // 	menu = await this.$API.demo.menu.get()
        // }
        // if(menu.code == 200){
        // 	this.$TOOL.data.set("MENU", menu.data.menu)
        // 	this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
        // }else{
        // 	this.islogin = false
        // 	this.$message.warning(menu.message)
        // 	return false
        // }
        this.$TOOL.data.set("indexPath", "/home");

        this.$router.push({
          path: "/home",
        });
        this.$message.success("Login Success 登录成功");
        this.islogin = false;

        document.title = "dfgdfg";
      },
    },
  };
</script>

<style scoped>
  .login_bg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }

  .login_container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1100px;
    margin: 0 auto;
    z-index: 1;
    transform: translate(-50%, -50%);
  }

  .login_body {
    width: inherit;
    display: flex;
    box-shadow: 0px 20px 80px 0px rgba(0, 0, 0, 0.3);
  }

  .login-sidebox {
    width: 50%;
    padding: 60px;
    color: #fff;
    background: #0d84ff;
    position: relative;
    overflow: hidden;
  }

  .login-sidebox__title h2 {
    font-size: 30px;
  }

  .login-sidebox__title h4 {
    font-size: 18px;
    margin-top: 10px;
    font-weight: normal;
  }

  .login-sidebox__title p {
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
  }

  .login-sidebox img {
    position: absolute;
    left: -120px;
    bottom: -160px;
    width: 550px;
  }

  .login-logo {
    text-align: center;
    margin-bottom: 30px;
  }

  .login-logo .logo {
    width: auto;
    height: 30px;
    vertical-align: bottom;
  }

  .login-logo h2 {
    font-size: 24px;
    margin-top: 20px;
    color: #40485b;
  }

  .login-title {
    margin-top: 20px;
  }

  .login-title h2 {
    font-size: 22px;
    font-weight: normal;
  }

  .login-title p {
    font-size: 12px;
    margin-top: 40px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
  }

  .login-form {
    width: 50%;
    padding: 60px 100px;
    background: #fff;
  }

  .login-oauth {
    display: flex;
    justify-content: space-around;
  }

  .login-form .el-divider {
    margin-top: 40px;
  }

  .login-footer {
    text-align: center;
    color: #999;
    margin-top: 50px;
  }

  .demo-user-item {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 10px 0;
  }

  .demo-user-item .icon {
    margin-right: 20px;
  }

  .demo-user-item .info h2 {
    font-size: 14px;
  }

  .demo-user-item .info p {
    color: #666;
    margin-top: 6px;
  }

  @media (max-height: 650px) {
    .login_bg {
      position: static;
    }

    .login_container {
      position: static;
      transform: none;
      margin: 50px auto;
    }

    .login-footer {
      margin-bottom: 50px;
    }
  }

  @media (max-width: 1200px) {
    .login_container {
      width: 900px;
    }

    .login-form {
      padding: 60px;
    }
  }

  @media (max-width: 1000px) {
    .login_container {
      width: 100%;
      background: #fff;
      margin: 0;
      transform: none;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
    }

    .login_body {
      box-shadow: none;
    }

    .login-form {
      width: 100%;
      padding: 60px 40px;
    }

    .login-sidebox {
      display: none;
    }

    .login-footer {
      margin-top: 0;
    }
  }
</style>